<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="decorator" uri="http://claudiushauptmann.com/jsp-decorator/"%>
<%@ page import="vn.fpt.fsoft.entity.User" %>

<decorator:decorate filename="MasterPage.jsp">
	<decorator:content placeholder="title">New TrustRegion</decorator:content>
	<decorator:content placeholder="head">
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
			rel="stylesheet" type="text/css" />
		<link href="css/style-1.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="css/style-homepage.css" type="text/css" />
		<script
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script
			src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript"
			src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
	
		<script>

  			function goBack() {
	  			window.location.replace("ListTrustRegion.jsp");
			}
  			
  			function isValidate() {
	  			var name = $("#name").val();
	  			if (name == "") {
		  			return false;
	  			} else { 
		  			return true;
	  			}
  			}
   			function Click_Save() {
	  			if(isValidate()) {
		  			bootbox.confirm("Are you sure you  want to save it?", function(result) {
			  			if(result == true) {
				  			var countryID = $("#country option:selected").val();
		          			var countryName = $("#country option:selected").text();
		          			var name = $("#name").val();
		          			var description = $("#description").val();
		         			$("#invalid").html("");
		          			$.ajax({
		              			url:"TrustRegionController?action=add&countryid=" + countryID 
		              					+ "&countryname=" 
		                      			+ countryName + "&name=" + name 
		                      			+ "&description=" + description,
		             			type: "GET",
		              			success:function(data) {
		              				$("#name").val("");
		            	  			$("#name").css("border-color", "");
		            	  			if (data == "Success!!!") {
		            	  				$("#invalid").css("color","green");
		            	  			} else {
		            	  				$("#invalid").css("color","red");
		            	  			}
		                  			$("#invalid").html(data);
		                  			
		              			},
		             		 	error:function(data){
		                  			alert("fail");
		              			}
		              		});
			  		} else {
				  		$("#invalid").html("");
				  		$("#name").val("");
				  		$("#description").val("");
				  		$("#name").focus();
			  		}
				});
		  	} else {
		  		$("#name").css("border-color", "red");
		  		$("#invalid").css("color","red");
		 		$("#invalid").html("Trust Region Name can not null");
	  		}
  		} 
      	$(document).ready(function() {
        	$("#tabs").tabs();  
        $(window).load(function(){
        	$.ajax({
                url:"TrustRegionController?action=getdata",
                type: "GET",
                success:function(data) {
                   $("select").append(data);
                },
                error:function(data){
                    alert("fail");
                }
             });
      	  });
      	});  
  	</script>
		
	</decorator:content>
	<decorator:content placeholder="body">
		<%
			User user = (User) request.getSession().getAttribute("user");
			if(user == null) {
			    response.sendRedirect("login.jsp");
			}
		%>
		<p style= "color:#0C3;font-size:24px;font-weight:bold;">Trust Region Details</p>           
		<div id="tabs" style="width: 795px;">
    	<ul>
        	<li><a href="#detail1">Detail</a></li>
        	<li style="float:right">
        		<input type="button" value="Save" onclick="Click_Save();"/> &nbsp;&nbsp;
        		<input type="button" value="Back" onclick="goBack();"/>
        	</li>             
    	</ul>
    	<div id="detail1" style="background-color: #EFEFEF;">
      		<table style="width:703px;">
          		<tr>
            		<td width="206">Nation/Conutry&nbsp;&nbsp;&nbsp;&nbsp;
            			<label style="color: red;">*</label>
            		</td>
            		<td width="481"><select id="country" style="width:35%;height:20px;"></select></td>
          		</tr>
          		<tr>
            		<td height="64">Trust Region Name&nbsp;&nbsp;&nbsp;&nbsp;
            			<label style="color: red;">*</label>
            		</td>
            		<td><input id="name" type="text" size="30"/></td>
          		</tr>
          		<tr>
            		<td>Description</td>
            		<td><textarea id="description" rows="4" cols="30"></textarea></td>
          		</tr>
      		</table>
      		<br/><br/><br/>
      		<p id = "invalid" style="color:#F00;font-size:14px"></p>
    	</div>
	</div>	
	</decorator:content>
</decorator:decorate>